<template>
  <view class="gpp-datePicker" @click.stop="show">
    <slot />
    <view
      class="g-dp-mask"
      :class="{ 'show': pipkerShowFlag }"
      @click.stop="hide"
      @touchmove.stop.prevent
      catchtouchmove="true"
    ></view>
    <view
      class="g-dp-content"
      :class="{ 'show': pipkerShowFlag }"
       :style="{paddingBottom:isIos?'64rpx':'0' }"
      @touchmove.stop.prevent
      catchtouchmove="true"
    >
      <view class="g-dp-ctt-wrapper">
        <picker-view
          :indicator-style="indicatorStyle"
          :value="selectedValue"
          @change="wrapperChange"
        >
          <picker-view-column>
            <view
              class="g-dp-ctt-wp-item"
              v-for="(item, index) in genderArray"
              :key="index"
              >{{ item.genderValue }}</view
            >
          </picker-view-column>
        </picker-view>
      </view>
      <view class="picker-btn-box">
        <view class="picker-btn">
          <view class="btn-cancel" @click.stop="onCancel">取消</view>
          <view class="btn-confirm" @click.stop="onConfirm">确定</view>
        </view>
      </view>
      <view class="ios_safe_zone_line" style="z-index: 2;" v-if="isIos"></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    genderArray: {
      type: Array,
      default() {
        return [];
      },
    },
    genderIndex: {
      type: Number,
      default() {
        return 0;
      },
    },
    isIos:{
      type: Boolean,
      default() {
        return false;
      },
    }
  },
  data() {
    return {
      pipkerShowFlag: false,
      indicatorStyle: `height: ${uni.upx2px(88)}px;`,
      selectedValue: 0,
      isGender: {},
    };
  },
  watch: {
    genderIndex: function (newVal, oldVal) {
      this.init();
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {},

    show() {
      this.pipkerShowFlag = true;
    },
    hide() {
      this.pipkerShowFlag = false;
    },
    onCancel() {
      this.pipkerShowFlag = false;
      // this.$emit("onGenderCancel", this.isGender);
    },
    onConfirm() {
      
      this.pipkerShowFlag = false;
      this.$emit("onGenderConfirm", {
        genderValue: this.genderArray[this.selectedValue],
        genderIndex:this.selectedValue
      });
    },

    /**
     * picker change时间触发
     * @param {Object} e
     */
    wrapperChange(e) {
      this.selectedValue = e.detail.value[0];
      this.isGender = e;
    },
  },
};
</script>

<style lang="scss">
.gpp-datePicker {
  position: relative;
  z-index: 999;
  border-radius: 55rpx 93rpx 0 0 !important;

  .g-dp-mask {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
  }

  .g-dp-mask.show {
    visibility: visible;
    opacity: 1;
  }

  .g-dp-content {
    position: fixed;
    z-index: 1001;
    bottom: 0;
    right: 0;
    width: 100%;
    transition: all 0.3s ease;
    transform: translateY(100%);
    border-radius: 55rpx 93rpx 0 0 !important;

    .g-dp-ctt-head {
      height: 88upx;
      background-color: #ffffff;
      padding: 0 40upx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .g-dp-ctt-hd-btn {
        color: #888;
        font-size: 17px;
      }
    }

    .g-dp-ctt-wrapper {
      // height: 480upx;
      width: 100%;
      border-radius: 16rpx 16rpx 0 0;
      background-color: #ffffff;

      .g-dp-ctt-wp-item {
        text-align: center;
        width: 100%;
        height: 88upx;
        line-height: 88upx;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 30upx;
      }
    }
  }

  .g-dp-content.show {
    transform: translateY(0);
  }

  picker-view-column {
    height: 480rpx !important;
  }
}

.picker-btn-box {
  height: 228rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffff;

  .picker-btn {
    width: 596rpx;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
  }

  .btn-cancel,
  .btn-confirm {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 282rpx;
    height: 88rpx;
    font-size: 36rpx;
    font-weight: 500;
    border-radius: 8rpx;
    font-family: NotoSansSC-Medium;
  }

  .btn-confirm {
    background: #3b8749;
    color: #ffffff;
  }

  .btn-cancel {
    background: #f2f2f2;
    color: #3b8749;
  }
}
</style>
